package com.huluobo.a2212mdmdemo.demo

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshots.SnapshotStateList
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage

/**
 *  Created by LC on 2025/5/22.
 */

@OptIn(ExperimentalLayoutApi::class, ExperimentalMaterial3Api::class)
@Composable
fun Demo03() {
    val list = remember {
        SnapshotStateList<String>()
    }

    var key by remember {
        mutableStateOf("")
    }
    Column {
        OutlinedTextField(
            modifier = Modifier.fillMaxWidth(),
            value = key,
            onValueChange = { key = it },
            trailingIcon = {
                Icon(imageVector = Icons.Default.Search, contentDescription = "", modifier = Modifier.clickable {
                    if (!key.isNullOrEmpty()) {
                        list.add(key)
                        key = ""
                    }
                })
            })

        FlowRow(
            Modifier.padding(10.dp),
            horizontalArrangement = Arrangement.spacedBy(10.dp),
            verticalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            list.forEach {
                FlowItem(text = it) {
                    key = it
                }
            }
        }
    }
}

@Composable
fun FlowItem(text: String, onClick: () -> Unit) {
    Text(
        text = text,
        modifier = Modifier
            .background(Color.Yellow, RoundedCornerShape(20.dp))
            .border(1.dp, Color.Gray, RoundedCornerShape(20.dp))
            .padding(horizontal = 10.dp, vertical = 5.dp)
            .clickable {
                onClick()
            },
        maxLines = 1, overflow = TextOverflow.Ellipsis,
    )
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MyBanner() {
    val list = listOf(
        "https://img2.baidu.com/it/u=1134184213,2435039814&fm=253&fmt=auto?w=1062&h=800",
        "https://img1.baidu.com/it/u=2693733305,4035903587&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1729184400&t=92694ac7a4bb0b4a405af0e28c18cd82",
        "https://img0.baidu.com/it/u=540669065,2162680038&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1729184400&t=3adc1ec41d0f0d8ac469eb88eb19c531",
        "https://img2.baidu.com/it/u=553712968,3437602612&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1729184400&t=280fc51f8b1c0619aedbe9c1d5ce9895",
        "https://img0.baidu.com/it/u=1677400077,1401427640&fm=253&fmt=auto?w=679&h=1216"
    )

    //保存轮播图页面的状态
    val pageState = rememberPagerState {
        5
    }
    var isShow by remember {
        mutableStateOf(false)
    }
    Column(modifier = Modifier.height(300.dp)) {
        HorizontalPager(state = pageState, modifier = Modifier.height(250.dp), verticalAlignment = Alignment.Top) {
            AsyncImage(
                model = list[it],
                contentDescription = "",
                modifier = Modifier.height(250.dp),
                contentScale = ContentScale.Crop
            )
        }

        Row(
            horizontalArrangement = Arrangement.Center, modifier = Modifier
                .fillMaxWidth()
                .offset(y = (-20).dp)
        ) {
            repeat(pageState.pageCount) {
                val color = if (pageState.currentPage == it) Color.DarkGray else Color.LightGray
                Box(
                    modifier = Modifier
                        .size(16.dp)
                        .padding(3.dp)
                        .clip(CircleShape)
                        .background(color = color)
                )
            }
        }

        Button(onClick = {
            isShow = true
        }) {
            Text(text = "弹窗")
        }
    }

    if (isShow) {
        AlertDialog(
            //单击弹窗外的范围时
            onDismissRequest = {
                isShow = false
            },
            //确认按钮
            confirmButton = {
                Text(text = "确认", modifier = Modifier.clickable {
                    isShow = false
                })
            },
            //取消按钮
            dismissButton = {
                Text(text = "取消", modifier = Modifier.clickable {
                    isShow = false
                })
            },
            //弹窗标题
            title = {
                Text(text = "弹窗提醒")
            },
            //弹窗内容
            text = {
                Text(text = "弹窗内容")
            })
    }
}